<template>
  <div class="teamSelect">
    <!-- 引导页 -->
    <div
      class="logoContainer"
      v-for="(logo, index) in logoList"
      :key="index"
      @click="teamSelectHandler(logo.name)"
    >
      <div class="logo">
        <img :src="logo.imagePath" alt="" />
        <span>{{ logo.name }}</span>
      </div>
      <div class="count">{{ logo.count }}</div>
    </div>
  </div>
</template>
        
<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import { ElMessage } from "element-plus";
import pubsub from "pubsub-js";

import mainApi from "@/api/mainApi";

export default {
  name: "球队选择",
  props: {
    propsData: {
      type: Object,
      default: "",
    },
  },
  data() {
    return {
      logoList: [],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      console.log(proxy.propsData);
      // 读取logo数据
      readLogoData();
      // 信息提示
      ElMessage("请先选择球队");
    });

    // 读取文件仓库路径
    function readLogoData() {
      // 读取文件仓库中的文件
      mainApi.readJson(ElMessage, (data) => {
        let folderPath = window.myApi.path.join(data.fileHouse, "/logo");

        // 遍历文件路径
        let fs = window.myApi.fs;
        let path = window.myApi.path;

        if (!fs.existsSync(folderPath)) {
          console.log("文件夹不存在:", folderPath);
          mainApi.writeDailyLog(
            "文件夹不存在:" + folderPath + "--teamSelect.vue"
          );
          return;
        }

        let files;
        try {
          // 读取文件夹内容
          files = fs.readdirSync(folderPath);
        } catch (error) {
          console.log("文件读取失败", error);
          mainApi.writeDailyLog("文件读取失败:" + error + "--teamSelect.vue");
        }

        // console.log(files);
        // 遍历文件夹内容
        new Promise((res, rej) => {
          let resultList = [];
          let index = 0;
          files.forEach((file) => {
            // 文件夹路径
            let fullPath = path.join(folderPath, file);
            // logo图片
            let logoPath = path.join(fullPath, fs.readdirSync(fullPath)[0]);

            // 读取图片
            fs.readFile(logoPath, { encoding: "base64" }, (err, imageData) => {
              if (err) {
                ElMessage({
                  message: `[${file}]图片读取失败`,
                  type: "error",
                  duration: 10000,
                });
                mainApi.writeDailyLog(
                  ` ${file}图片读取失败:` + fullPath + "--teamSelect.vue"
                );
                throw err;
              }

              // 载入内容
              resultList.push({
                imagePath: "data:image/png;base64," + imageData,
                name: file,
              });
              index++;
              if (index === 30) res(resultList);
            });
          });
        }).then((resultList) => {
          // 执行排序
          resultList.sort((a, b) => {
            const nameA = a.name.toUpperCase();
            const nameB = b.name.toUpperCase();
            if (nameA < nameB) {
              return -1;
            }
            if (nameA > nameB) {
              return 1;
            }
            return 0;
          });
          // 文件数量计数
          modCount(resultList);
          console.log("logo列表加载完成。", proxy.logoList);
          mainApi.writeDailyLog("logo列表加载完成" + "--teamSelect.vue");
        });
      });
    }

    // 选择响应器
    function teamSelectHandler(name) {
      // ElMessage(`选择了${name}队`);
      mainApi.writeDailyLog(`选择了${name}队` + "--teamSelect.vue");
      pubsub.publish("teamSelectResult", {
        teamName: name,
        moduleName: proxy.propsData.origin_nav,
      });
    }

    // 文件数量计数
    function modCount(resultList) {
      mainApi.readJson(ElMessage, (data) => {
        let folderPath = window.myApi.path.join(
          data.fileHouse,
          `/${proxy.propsData.origin_nav}`
        );
        // 遍历文件路径
        let fs = window.myApi.fs;
        let path = window.myApi.path;

        if (!fs.existsSync(folderPath)) {
          console.log("文件夹不存在:", folderPath);
          mainApi.writeDailyLog(
            "文件夹不存在:" + folderPath + "--teamSelect.vue"
          );
          return;
        }

        let files;
        try {
          // 读取文件夹内容
          files = fs.readdirSync(folderPath);
        } catch (error) {
          mainApi.writeDailyLog("读取文件夹内容" + error + "--teamSelect.vue");
        }

        // console.log(files);
        resultList.forEach((logo) => {
          let count = 0;
          files.forEach((file) => {
            if (file.indexOf(logo.name) != -1) count++;
          });
          logo.count = count;
          // 数据填入dom列表
          proxy.logoList.push(logo);
        });
      });
    }

    return {
      teamSelectHandler,
    };
  },
};
</script>
        
<style lang="less" scoped>
@import "../less/variables.less";
.teamSelect {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* 鼠标悬停时的滑块样式 */
.teamSelect::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.logoContainer {
  margin: 1% 0%;
  margin-right: 2%;
  position: relative;
  padding: 0.5%;
  > .logo {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    width: 60px * 2.5;
    height: 30px * 2;
    min-width: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    > img {
      height: 80%;
      object-fit: cover;
      display: inline-block;
      margin: 0 5%;
    }
    > span {
      // font-weight: bold;
      font-size: 110%;
    }
  }

  > .count {
    position: absolute;
    top: 0%;
    right: 0%;
    background-color: @red;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: white;
    font-size: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.logo:hover {
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(252, 61, 73, 0.7);
}
</style>
        